<script>
import { Toast } from 'vant';
import UPopup from '@/components/u-popup.vue';
import UConfirm from '@/components/u-confirm.vue';

export default {
  name: 'team',
  components: { UConfirm, UPopup },
  data() {
    return {
      value: '',
      image: require('./image/icon@2x.png'),
      showEdit: false,
      showAdd: false,
      editForm: {
        username: '',
        proportion: ''
      },
      addForm: {
        //身份 备注姓名  账号  验证码
        username: '',//备注姓名
        //身份
        identity: '',
        //账号
        account: '',
        //验证码
        code: ''
      },
      showDel: false,
      //提现show
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
    close() {
      this.showEdit = false;
    },
    confirm() {
      this.showEdit = false;
    },
    closeAdd() {
      this.showAdd = false;
    },
    confirmAdd() {
      this.showAdd = false;
    },
    closeDel() {
      this.showDel = false;
    },
    confirmDel() {
      this.showDel = false;
    },

  }
};
</script>

<template>
  <frame-view class="index">
    <van-search
      v-model="value"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    >
      <template #action>
        <div style="display: flex;justify-content: right;align-items: center">
          <img :src="image" style="width: 30px;height: 30px" alt="图片" />&nbsp;
          <span style="font-size: 28px;color: #222222;">提现记录</span>
        </div>
      </template>
    </van-search>

    <div style="border-radius: 24px;font-size: 28px;background-color: #fff;margin-top: 16px" v-for="i in 10">
      <div style="padding: 29px 24px;">

        <div style="display: flex">
          <div
            style="width: 68px;height: 68px;background-color: var(--primary-color);display: flex;align-items: center;justify-content: center;color: #fff;border-radius: 34px">
            陈
          </div>
          <div style="margin-left: 16px">
            <div style="font-size: 32px;color: #222222;">13140174343</div>
            <div style="font-size: 24px;color: #999999;margin-top: 6px">手机号</div>
          </div>
        </div>
        <p style="margin-top: 28px">
          <span style="color: #999">备注姓名</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;孙春雨
        </p>
        <p style="margin-top: 16px">
          <span style="color: #999">提成比例</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;80%
        </p>
      </div>
      <div
        style="width: 686px;height: 128px;background: rgba(24,105,255,0.12);;display: flex;align-items: center;justify-content: space-evenly;padding: 20px; margin:0px auto auto;border-radius: 20px">

        <div>
          <p style="font-weight: bold;font-size: 40px;color: #333333;text-align: center">42</p>
          <p style="font-weight: 400;font-size: 24px;color: #A8A8A8;">累计收益(元)</p>
        </div>
        <div style="display: inline-flex;height: 100%;border-right: #000000 1px solid;opacity: 0.16;"></div>
        <div>
          <p style="font-weight: bold;font-size: 40px;color: #333333;text-align: center">42</p>
          <p style="font-weight: 400;font-size: 24px;color: #A8A8A8;">账户余额(元)</p>
        </div>
        <div style="display: inline-flex;height: 100%;border-right: #000000 1px solid;opacity: 0.16;"></div>
        <div>
          <p style="font-weight: bold;font-size: 40px;text-align: center">42</p>
          <p style="font-weight: 400;font-size: 24px;color: #A8A8A8;">代理总收益(元)</p>
        </div>

      </div>
      <div style="display: flex;justify-content: right;padding: 24px">
        <van-button plain type="info" style="width: 152px;height: 60px" round @click="showDel = true">删除</van-button>
        <van-button type="info" style="width: 152px;height: 60px;margin-left: 16px" round @click="showEdit=true">编辑
        </van-button>

      </div>


    </div>
    <div style="height: 150px"></div>

    <div style="position: fixed;bottom: 0;left:0;width: 100vw;padding: 30px 20px;background-color: #fff">

      <van-button type="info" style="width: 686px;height: 80px;" round @click="showAdd = true">添加人员</van-button>

    </div>

    <!--编辑-->
    <u-popup title="编辑团队信息" :show="showEdit" @close="close" @confirm="confirm">
      <van-form style="margin-top: 48px;padding-bottom: 76px">
        <van-field
          border
          v-model="addForm.username"
          name="备注姓名"
          label="备注姓名"
          label-align="right"
          placeholder="备注姓名"
        />
        <van-field
          border
          v-model="editForm.proportion"
          name="比例"
          label="比例"
          label-align="right"
          placeholder="比例"
        >
          <template #extra>
            <div style="margin:0 10px;display: flex;align-items: center;">
              100%
            </div>
          </template>

        </van-field>
      </van-form>
    </u-popup>
    <!--添加-->
    <u-popup title="添加人员" :show="showAdd" @close="closeAdd" @confirm="confirmAdd">
      <van-form style="margin-top: 48px;padding-bottom: 76px">

        <van-field
          border
          v-model="addForm.identity"
          name="身份"
          label="身份"
          label-align="right"
          placeholder="请选择身份"
          readonly
        >
          <template #extra>
            <div style="position: relative">
              <van-icon name="arrow" style="position: absolute;right: 10px;top: 50%;transform: translateY(-50%)" />
            </div>
          </template>
        </van-field>
        <van-field
          border
          v-model="addForm.username"
          name="备注姓名"
          label="备注姓名"
          label-align="right"
          placeholder="备注姓名"
        />
        <van-field
          border
          v-model="addForm.account"
          name="账号"
          label="账号"
          label-align="right"
          placeholder="请选择账号"
          readonly
        >
          <template #extra>
            <div style="position: relative">
              <van-icon name="arrow" style="position: absolute;right: 10px;top: 50%;transform: translateY(-50%)" />
            </div>
          </template>
        </van-field>

        <van-field
          border
          v-model="addForm.proportion"
          name="比例"
          label="比例"
          label-align="right"
          placeholder="比例"
        >
          <template #extra>
            <div style="margin:0 10px;display: flex;align-items: center;">
              获取验证码
            </div>
          </template>

        </van-field>

      </van-form>
    </u-popup>

    <!--    删除-->

    <u-confirm :show-title="false" position="center" :show="showDel" @close="closeDel" @confirm="confirmDel">
      <div style="font-weight: 500;font-size: 32px;color: #262626;;width: 592px;text-align: center;padding: 72px 0  48px ">
        确认删除 <span style="color: #FF4A00">13140174343</span> 合伙人吗
      </div>

    </u-confirm>
  </frame-view>

</template>

<style scoped lang="scss">

</style>
